<template>
  <header>
    <!-- 面包屑 -->
    <div class="l-content">
      <!-- <h3>泛鹏管理会计平台</h3> -->
      <!-- <p>VANTAGE POINT Management accounting Platform</p> -->
      <img
        src="../assets/images/name.png"
        style="margin:14px 19px"
        alt="vprisk"
      />

      <!-- <el-breadcrumb separator="/"> -->
      <!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="current.path" v-if="current">{{
          current.label
      }}</el-breadcrumb-item>-->
      <!-- </el-breadcrumb> -->
    </div>
    <div class="appsClass" >
      <i class="el-icon-s-grid" style="margin-right:5px;width:100px;height:13px;display:block"
        @click="appClick" id="tourstep2">应用分类</i
      >
      <div class="appList" id="appS" >
        <ul>
          <li
            v-for="(item, i) in appList"
            :key="i"
            :style="'background:' + item.color"
          >
            <div><i :class="item.icon"></i></div>
            <p>{{ item.text }}</p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 主题中心  -->
    <el-popover placement="bottom" width="150" trigger="click" v-if="false">
      <div class="theme-center">
        <ul>
          <li @click="handleSelectedTheme(1)">
            <span class="org-rect"></span>
            <span>淡蓝</span>
          </li>
          <li @click="handleSelectedTheme(2)">
            <span class="blue-rect"></span>
            <span>钻石蓝</span>
          </li>
          <li @click="handleSelectedTheme(3)">
            <span class="black-rect"></span>
            <span>时尚黑</span>
          </li>
          <li @click="handleSelectedTheme(4)">
            <span class="white-rect"></span>
            <span>经典白</span>
          </li>
        </ul>
      </div>
      <el-link slot="reference" class="theme">
        <i class="skin gnxicon icon-self-skin"></i>主题
        <!-- <i class="icon el-icon-orange"></i>主题 -->
      </el-link>
    </el-popover>
    <div class="r-content">
      <div class="user_info">
        <ul>
          <li v-for="item in infoList" :key="item.icon" @click="item.function">
            <i :class="item.icon"></i>{{ item.text }}
          </li>
        </ul>
      </div>
      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          <img :src="userImg" class="user" />
        </span>
        <el-dropdown-menu slot="dropdown" size="mini">
          <el-dropdown-item>个人中心</el-dropdown-item>
          <!-- .native修饰符表示使用的是原生的事件 -->
          <el-dropdown-item @click.native="logOut">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </header>
</template>

<script>
document.body.onclick=function(e){
  var  e = e || window.event;
  let clickE=e.target;
  let areaE = document.getElementsByClassName("appsClass")[0];
  let dom =document.getElementById("appS")
  console.log(areaE)
  if(areaE.contains(clickE)){}else{
      dom.style.opacity=0;
      dom.style.height= "0px";
  }
}
import { mapState } from "vuex";
export default {
  data() {
    return {
      // appFlg:false,
      userImg: require("../assets/images/user.png"),
      infoList: [
         {
          icon: "iconfont icon-top_licensexiaoxi",
          text: "license信息",
          function: () => {}
        },
        {
          icon: "iconfont icon-daibantongzhi",
          text: "代办通知",
          function: () => {}
        },
        {
          icon: "iconfont icon-xiugaimima",
          text: "修改密码",
          function: () => {}
        },
        {
          icon: "iconfont icon-gongchengqiehuan",
          text: "工程切换",
          function: () => {}
        },
        { icon: "iconfont icon-tuichu", text: "退出", function: this.logOut }
      ],
      appList: [
        {
          text: "业务预算管理",
          color: "linear-gradient(145deg, #ECD36A 0%, #D7B047 100%)",
          icon: "iconfont icon-yewuyusuanguanli",
          path: ""
        },
        {
          text: "资产负债管理",
          color: "linear-gradient(154deg, #E79D9D 0%, #CC6868 100%)",
          icon: "iconfont icon-zichanfuzhaiguanli",
          path: ""
        },
        {
          text: "资金头寸管理",
          color: "linear-gradient(161deg, #A0B4EC 0%, #7699CB 100%)",
          icon: "iconfont icon-zijintoucunguanli",
          path: ""
        },
        {
          text: "公共管理",
          color: "linear-gradient(341deg, #73C5B3 0%, #97DACB 100%)",
          icon: "iconfont icon-gonggongguanli",
          path: ""
        },
        {
          text: "资金转移定价",
          color: "linear-gradient(146deg, #A1DDAC 0%, #6CB678 100%)",
          icon: "iconfont icon-zijinzhuanyidingjia",
          path: ""
        },
        {
          text: "成本分摊管理",
          color: "linear-gradient(137deg, #90D3CA 0%, #62AA9F 100%)",
          icon: "iconfont icon-chengbenfentanguanli",
          path: ""
        },
        {
          text: "报表分析",
          color: "linear-gradient(157deg, #B09EC7 0%, #7D5FA6 100%)",
          icon: "iconfont icon-baobiaofenxi",
          path: ""
        },
        {
          text: "系统管理",
          color: "linear-gradient(160deg, #F2BC7C 0%, #F1882E 100%)",
          icon: "iconfont icon-xitongguanli",
          path: ""
        },
        {
          text: "经济资本计量",
          color: "linear-gradient(142deg, #E7D39E 0%, #BB9D5B 100%)",
          icon: "iconfont icon-jingjizibenjiliang",
          path: ""
        },
        {
          text: "数据集市",
          color: "linear-gradient(142deg, #FFB58C 0%, #D68356 100%)",
          icon: "iconfont icon-shujujishi",
          path: ""
        },
        {
          text: "客户关系定价",
          color: "linear-gradient(157deg, #D9E1FE 0%, #9FA8D7 100%)",
          icon: "iconfont icon-huaban",
          path: ""
        }
      ]
    };
  },
  computed: {
    ...mapState({
      current: state => state.tab.currentMenu
    })
  },
  methods: {
    logOut() {
      // 置空token
      this.$store.commit("clearToken");
      // 清除菜单
      this.$store.commit("clearMenu");
      // 刷新浏览器
      location.reload();
    },
    handleSelectedTheme(number) {
      document.body.className = "theme-" + number;
    },
    appClick(){
      let dom = document.getElementsByClassName('appList')[0];
      if(dom.style.opacity!=1){
        dom.style.opacity=1;
        dom.style.height= "212px";
      }else{
        dom.style.opacity=0;
        dom.style.height= "0px";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
header {
  height: 100%;
  background: white;
  box-shadow: 0px 2px 4px 0px #e4e8eb;
}
.l-content {
  float: left;
  // display: flex;
  // align-items: center;
  // .el-button {
  //   margin-right: 20px;
  // }
  h3 {
    margin-top: 14px;
    margin-left: 19px;
    width: 186px;
    height: 22px;
    font-size: 22px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 500;
    color: #40506f;
    line-height: 22px;
  }
  p {
    margin-top: 4px;
    width: 380px;
    height: 4px;
    margin-left: 19px;
    line-height: 4px;
    font-size: 4px;
    font-family: DINAlternate-Bold, DINAlternate;
    font-weight: bold;
    color: #a6b1c7;
  }
}

.appsClass {
  float: left;
  margin: 24px 21px;
  width: 88px;
  height: 17px;
  text-align: left;
  font-size: 14px;
  color: #a7adba;
  .el-icon-s-grid {
    cursor: pointer;
  }
}
// .appsClass:hover .appList {
//   width: 412px;
//   height: 312px;
//   opacity: 1;
// }
.appList {
  transition: all 0.3s;
  position: absolute;
  // top: 0;
  // left: 0;
  z-index: 999;
  opacity: 0;
  width: 412px;
  height: 0;
  top: 50px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0px 2px 4px 0px #d4d8e3;
  border: 1px solid #e0e4ec;
  ul {
    li:hover{
       opacity: 0.8;
     }
    li {
      display: inline-block;
      overflow: hidden;
      margin-top:10px;
      margin-left:10px;
      width: 90px;
      height: 90px;
      border-radius: 4px;
      cursor: pointer;
      div {
        height: 62px;
        text-align: center;
        padding-top: 14px;
        .iconfont {
          width: 33px;
          height: 32px;
          font-size: 32px !important;
          color: #fff;
        }
      }
      p {
        text-align: center;
        height: 28px;
        font-size: 12px;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 28px;
        background-color: rgba(0, 0, 0, 0.2);
      }
    }
  }
}
.user_info {
  float: left;
  height: 100%;
  margin-top: 28px;
  ul {
    display: flex;
    li {
      // width: 90px;
      margin-right: 35px;
      font-size: 12px;
      color: #a7adba;
      cursor: pointer;
      // .icon-top_licensexiaoxi{
      //   font-size: 12px;
      // }
    }
  }
}
.r-content {
  float: right;
  height: 100%;
  .user {
    vertical-align: middle;
    height: 40px;
    margin: 10px 19px;
    background-size: 100%;
    border-radius: 50%;
  }
}
</style>
<style lang="scss">
.el-breadcrumb__item {
  .el-breadcrumb__inner {
    color: #666;
    font-weight: normal;
  }
  &:last-child {
    .el-breadcrumb__inner {
      color: rgb(27, 26, 26);
    }
  }
}
// .el-breadcrumb__inner a,
// .el-breadcrumb__inner.is-link {
//   color: white !important;
// }
</style>
